import React, { FC, useEffect, useRef, useState } from 'react';
import _ from 'lodash';
import { DownOutline } from 'antd-mobile-icons';
import MyHead from '../../components/MyHead';
import PassInput from '../../components/PassInput';
import { reg } from '../../utils/validate';
import {
    Form,
    Input,
    Button,
    Dialog,
    Checkbox,
    Space,
    DatePicker,
    Radio,
  } from 'antd-mobile'
import { ShowMessage, ShowPassword } from '../../utils/message';
import { registerAPI } from '../../api/api';
import { useCommonFunc } from '../../hooks/useCommon';
import qs from "qs"
import { Link } from 'react-router-dom';

interface MobileValue {
    preValue: string
    realValue: string
}

export interface UserInfoType {
    userName?: string,
    phonenumber?: string,
    sex?: string,
    password?: string,
    dbpass?: string,
    username?: string,
}

const Reg: FC = () => {
    const { gotopage } = useCommonFunc()
    const formRef: any = useRef()
    const [form] = Form.useForm()

    const checkMobile = (_: any, value: MobileValue) => {
        if (value.realValue) {
            return Promise.resolve()
        }
        return Promise.reject(new Error('手机号不能为空!'))
    }

    const onFinish = async (value: UserInfoType) => {
        const res = await registerAPI(value) as any;
        if (res.code == 200) {
            gotopage('/login?' + qs.stringify({ phonenumber: value.phonenumber, userName: value.userName }))
        }
    }

    const onFinishFailed = () => {
        ShowMessage('表单校验失败')
    }

    return (
        <div className='spage reg'>
            <MyHead title='注册' />
            <div className='reg-box' style={{ padding: 15}}>
                <Form
                    ref={formRef}
                    form={form}
                    layout='vertical'
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    initialValues={{
                        sex:'0',
                    }}
                    footer={
                        <div
                        style={{display:'flex'}}
                        >
                            <Button style={{flex:1,margin:"8px"}} type='submit' color='primary' size='large' >
                                提交
                            </Button>
                            <Button style={{flex:1,margin:"8px"}} type='reset' color='danger' size='large'>
                                重置
                            </Button>
                        </div>
                    }
                >
                    <Form.Header>欢迎注册</Form.Header>
                    <Form.Item
                        label='用户名'
                        name='userName'
                        rules={[{ required: true, message: '用户名不能为空!' }]}
                    >
                        <Input placeholder='请输入用户名' autoComplete='true' clearable/>
                    </Form.Item>
                    <Form.Item
                        label='手机号'
                        name='phonenumber'
                        rules={[
                            { required: true, message: "手机号不能为空" },
                            { pattern: reg.phone, message: "手机号格式有误" }
                        ]}
                    >
                        <Input placeholder='请输入手机号' autoComplete='true' clearable/>
                    </Form.Item>
                    <Form.Item 
                        label="性别"
                        name="sex"
                        rules={[
                            { required: true, message: "请选择性别" },
                        ]}
                    >
                        <Radio.Group
                            onChange={val => {
                                
                            }}
                        >
                        <Space>
                            <Radio value='0'>男</Radio>
                            <Radio value='1'>女</Radio>
                        </Space>
                        </Radio.Group>
                    </Form.Item>

                    <PassInput
                    name='password'
                    dependencies={'dppass'}
                    ></PassInput>

                    <PassInput
                    label='确认密码'
                    name='dppass'
                    placeholder='请确认密码'
                    dependencies={'password'}
                    rules={[
                        // 正则校验函数 
                        ({ getFieldValue }) => ({
                            validator(_, value) {   // dbpass 
                                if (reg.pwd.test(value)) {
                                    if (getFieldValue('password') === value) {
                                        return Promise.resolve();
                                    }
                                    return Promise.reject(new Error('新旧密码不匹配!'));
                                } else {
                                    return Promise.resolve();
                                }
                            },
                        }),
                    ]}
                    ></PassInput>

                    <Form.Item>
                        <div style={{ display: 'flex', justifyContent: 'space-between',margin:0 }}>
                            <Link to='/login' style={{color:'#f50',fontSize:16}}>登录</Link>
                            <Link to='/findpass' style={{fontSize:16}}>找回密码</Link>
                        </div>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
};

export default Reg;